<template>
  <ul class="todo-list">
    <!-- 设置动态class isDone为true时 就有completed这个类名 -->
    <li v-for="obj in arr" :key="obj.id" :class="{completed:obj.isDone} ">
      <div class="view">
        <!-- v-model双向绑定isDone值 -->
        <input type="checkbox" class="toggle" v-model="obj.isDone">
        <label> {{obj.name}} </label>
        <!-- 删除事件 -->
        <button class="destroy" @click="delFn(obj.id) "></button>
      </div>
    </li>
  </ul>
</template>

<script>
export default {
  // 定义 props遍历 接收app传过来的数据
  props:['arr'],
  methods:{
    delFn(id){
      // 子组件->父组件
      this.$emit('del',id)
    }
  }
}
</script>

<style>

</style>